<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>adsfasdf</h1>
      <p>姓名：{{ name }}</p>
      <p>年龄：{{ age }}</p>
      <p>性别：{{ sex }}</p>
      <p>城市：{{ addressInfo.city }}</p>
      <button @click="name = '里斯'"></button>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script>
      // isRef() 判断传递的参数是否为 ref 对象
      // unref() 解包 ref, 如果传递的参数是一个ref对象，返回值是它.value。如果传递的参数不是一个ref对象，则返回它本身
      // toRef() 将 reactive 对象或者普通对象的某个属性转换成 ref 对象返回。
      // toRefs() 将 reactive 对象或者普通对象所有属性转换成 ref 对象并返回一个新对象。

      const { isRef, unref, toRef, toRefs, ref, reactive } = Vue;

      Vue.createApp({
        setup() {
          const person = reactive({
            name: "张三",
            age: 18,
            sex: "男",
            addressInfo: {
              city: "深圳市",
            },
          });

          return {
            ...toRefs(person),
            // name: toRef(person, 'name'),
            // age: person.age,
            // sex: person.sex,
            // addressInfo: person.addressInfo,
          };
        },
      }).mount("#app");

      // Vue.createApp({
      //   setup() {
      //     const count = ref(0);
      //     const number = 0;

      //     const state = reactive({
      //       name: "张三",
      //       age: 18,
      //     });

      //     const { name, age } = toRefs(state);
      //     console.log(name);
      //     console.log(age);

      //     // const name = toRef(state, "name");
      //     // const age = toRef(state, "age");
      //     // console.log(name); // Ref

      //     console.log(isRef(count)); // true
      //     console.log(isRef(number)); // false

      //     console.log(unref(count)); // 0
      //     console.log(unref(number)); // 0
      //   },
      // }).mount("#app");
    </script>
  </body>
</html>
